import { Link } from 'react-router-dom'
import {
  Card,
  Breadcrumb,
  Form,
  Button,
  Radio,
  DatePicker,
  Table,
  Tag,
  Space,
  Modal,
} from 'antd'
// import 'moment/locale/zh-cn'
// import locale from 'antd/es/date-picker/locale/zh_CN'
import {
  EditOutlined,
  DeleteOutlined,
  ExclamationCircleOutlined,
} from '@ant-design/icons'

import img404 from '@/assets/error.png'
import { useEffect, useRef } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { deleteArticleAction, getArticleAction } from '@/store/modules/article'
import { useNavigate } from 'react-router-dom'
// 导入频道选择组件
import Channel from '@/components/channel'
// import { getChannelApi } from '@/api/article'

const { RangePicker } = DatePicker

// 结构函数的静态属性
const { confirm } = Modal

// 优化文章状态的处理
// 文章状态，0-草稿，1-待审核，2-审核通过，3-审核失败
const articleStatus = {
  0: { color: 'yellow', text: '草稿' },
  1: { color: '#ccc', text: '待审核' },
  2: { color: 'green', text: '审核通过' },
  3: { color: 'red', text: '审核失败' },
}

const Article = () => {
  /**
   * 需求1：获取频道数据，存到redux中，绑定到筛选下拉框中
   * 1. 定义异步action获取后台频道数据，存到redux
   * 2. 从redux获取数据渲染
   * 需求2：获取文章列表数据，存到redux中，绑定table
   */
  const hs = useNavigate()
  // 1. redux方式
  const dispatch = useDispatch()
  // vue的mouted
  // const [list, setList] = useState([])
  useEffect(() => {
    // 获取频道
    // dispatch(getChannelAction())
    // 获取文章列表=》默认第一次，空传
    dispatch(getArticleAction())
    // 2. 普通方式
    // 发请求
    // ;(async () => {
    //   const { data } = await getChannelApi()
    //   console.log('页面直接调用接口：', data.channels)
    //   setList(data.channels)
    // })()
  }, [dispatch])
  const {
    query: { count, page, pageSize },
    articleList,
  } = useSelector((state) => state.article)

  // 点击过滤文章列表数据
  // 说明：使用useRef存储值，默认值和存储值类型一致
  let filters = useRef({})
  const onFilter = ({ status, channel_id, date }) => {
    console.log('表单所有数据：', status, channel_id, date)
    // 1. 组装查询参数
    const params = { channel_id, page, per_page: pageSize }
    // 排除全部（因为全部，不需要传status）
    if (status !== -1) {
      params.status = status
    }
    // 怎么判断一个值，不能为 ''  undefined null=》!!value
    if (!!date) {
      params.begin_pubdate = date[0].format('YYYY-MM-DD')
      params.end_pubdate = date[1].format('YYYY-MM-DD')
    }
    // 存储筛选条件
    filters.current = params
    // 2. 根据筛选文章列表数据
    dispatch(getArticleAction(params))
  }

  // 页码/条数切换
  /**
   *
   * @param {*} page 当前点击页码
   * @param {*} pageSize 当前选择每页多少条数据
   */
  const pageChange = (page, pageSize) => {
    console.log('获取上次筛选条件：', filters.current)
    console.log(page, pageSize)
    // 1. 组装查询参数
    // 问题：筛选条件的数据怎么存储，带到分页查询中？
    const params = { ...filters.current, page, per_page: pageSize }
    // 2. 根据最新页码和条数刷新列表
    dispatch(getArticleAction(params))
  }

  // 删除文章
  const delArticle = (row) => {
    // 用户点击确认后执行删除
    confirm({
      title: `确认删除：${row.title}?`,
      icon: <ExclamationCircleOutlined />,
      onOk() {
        console.log('OK')
        dispatch(deleteArticleAction(row.id, filters.current))
      },
      onCancel() {
        console.log('Cancel')
      },
    })
  }

  // 结合后台当前列表接口的文档配置=》决定table每列展示什么数据
  const columns = [
    {
      // 列名
      title: '封面',
      // 指定当前列显示数据的属性名
      dataIndex: 'cover',
      // 自定义列渲染
      render: (cover) => {
        // console.log('fm', cover)
        cover = cover.images[0]
        return <img src={cover || img404} width={200} height={150} alt="" />
      },
    },
    {
      title: '标题',
      dataIndex: 'title',
      width: 220,
    },
    {
      title: '状态',
      dataIndex: 'status',
      // 文章状态，0-草稿，1-待审核，2-审核通过，3-审核失败
      render: (status, row) => (
        <Tag color={articleStatus[status].color}>
          {articleStatus[status].text}
        </Tag>
      ),
    },
    {
      title: '发布时间',
      dataIndex: 'pubdate',
    },
    {
      title: '阅读数',
      dataIndex: 'read_count',
    },
    {
      title: '评论数',
      dataIndex: 'comment_count',
    },
    {
      title: '点赞数',
      dataIndex: 'like_count',
    },
    // 配置操作按钮
    {
      title: '操作',
      render: (row) => {
        return (
          <Space size="middle">
            {/* 修改文章 */}
            <Button
              onClick={() => {
                hs(`/publish/${row.id}`)
              }}
              type="primary"
              shape="circle"
              icon={<EditOutlined />}
            />
            {/* 删除文章 */}
            <Button
              type="primary"
              danger
              shape="circle"
              icon={<DeleteOutlined />}
              onClick={() => {
                // console.log('row:', row)
                delArticle(row)
              }}
            />
          </Space>
        )
      },
    },
  ]

  return (
    <>
      {/* 筛选区域 */}
      <Card
        // 卡片header部分
        title={
          <Breadcrumb separator=">">
            <Breadcrumb.Item>
              <Link to="/">首页</Link>
            </Breadcrumb.Item>
            <Breadcrumb.Item>内容管理</Breadcrumb.Item>
          </Breadcrumb>
        }
        style={{ marginBottom: 20 }}
      >
        {/* Card组件通过props.children属性接收到，使用差值渲染 */}
        <Form onFinish={onFilter} initialValues={{ status: -1 }}>
          <Form.Item label="状态" name="status">
            {/* 单选：选择文章的状态 */}
            <Radio.Group>
              <Radio value={-1}>全部</Radio>
              <Radio value={0}>草稿</Radio>
              <Radio value={1}>待审核</Radio>
              <Radio value={2}>审核通过</Radio>
              <Radio value={3}>审核失败</Radio>
            </Radio.Group>
          </Form.Item>

          <Form.Item label="频道" name="channel_id">
            {/* 下拉选择：文章频道 */}
            {/* Form.Item控制Channel组件，获取组件变化，存到channel_id */}
            <Channel width={266} />
          </Form.Item>

          <Form.Item label="日期" name="date">
            {/* 时间范围：文章发布时间 */}
            {/* <RangePicker locale={locale}></RangePicker> */}
            <RangePicker></RangePicker>
          </Form.Item>

          <Form.Item>
            {/* 提交：筛选文章列表数据 */}
            <Button type="primary" htmlType="submit">
              筛选
            </Button>
          </Form.Item>
        </Form>
      </Card>
      {/* 筛选结果 */}
      <Card title={`根据筛选条件共查询到 ${count} 条结果：`}>
        <Table
          rowKey="id"
          columns={columns}
          dataSource={articleList}
          pagination={{
            position: ['bottomLeft'], // 分页位置
            current: page, // 当前页码
            pageSize, // 每页多少条数据
            total: count, // 数据总条数
            showSizeChanger: true, // 显示控制每页条数的下拉框
            onChange: pageChange,
          }}
        />
      </Card>
    </>
  )
}

export default Article
